<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"	
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:shiro="http://shiro.apache.org/tags">

	<ul id="loginMenu" class="layout" >
		 			<h:form id="formlogout">	
		 				<li><h:outputLink  style=" visibility: #{(userBean.successLogin) ? 'hidden' : 'visible'};" value="#{facesContext.externalContext.requestContextPath}/views/user-register.jsf">Registro</h:outputLink></li>	 			
						<li><shiro:guest>Guest!</shiro:guest></li>
							<h:outputLink value="#" id="ll" style=" visibility: #{(userBean.successLogin) ? 'hidden' : 'visible'};">
							<rich:componentControl event="click" operation="show" target="lp" style=" visibility: #{(userBean.successLogin) ? 'hidden' : 'visible'};">
		               			 <a4j:param name="event" value="event" noEscape="true" />
		                			<rich:hashParam>
		                    			<a4j:param noEscape="true" name="top"
		                        			value="jQuery(#{rich:element('ll')}.parentNode).offset().top + jQuery(#{rich:element('ll')}.parentNode).height()" />
		                    			<a4j:param noEscape="true" name="left"
		                        			value="jQuery(#{rich:element('ll')}.parentNode).offset().left" />
		                			</rich:hashParam>
		            		</rich:componentControl>Login</h:outputLink>
							<rich:dropDownMenu style=" visibility: #{(userBean.successLogin) ? 'visible' : 'hidden'};">
	                			<f:facet name="label"> 
	                    			<h:panelGroup>
	                        			<a4j:mediaOutput element="img" mimeType="#{userBean.image.mime}"
                                    		createContent="#{userBean.paint}" value="0"
                                    		style="width:30px; height:30px;" cacheable="false"
                                    		rendered="#{userBean.successLogin}">
<!--                                    	<f:param value="#{fileUploadBean.timeStamp}" name="time"/>  -->
                    					</a4j:mediaOutput>
                    					<h:graphicImage value="/images/man.jpg" rendered="#{userBean.showdefaultimage and userBean.sex == 'M'}" width="30px" height="30px" styleClass="pic"/>  
                    					<h:graphicImage value="/images/woman.jpg" rendered="#{userBean.showdefaultimage and userBean.sex == 'F'}" width="30px" height="30px" styleClass="pic"/>  
	                        			<h:outputText value="#{userBean.mail}"/>
	                    			</h:panelGroup>
	                			</f:facet>	
	                			<shiro:hasRole name="usuario">                			
		                			<rich:menuItem submitMode="none"  action="/views/paypal.jsf">
		                				 <h:outputText value="Depositar Dinero"/>	                				
		                			</rich:menuItem>	                			
		                			<rich:menuItem submitMode="none"  action="/views/paypal-transfer-amount.jsf">
		                				 <h:outputText value="Retirar Dinero"/>	                				
		                			</rich:menuItem>
	                			</shiro:hasRole>
	                			<rich:menuItem submitMode="ajax"  action="/views/user-edition.jsf">
	                				<h:outputText value="Editar Perfil"/>	                				
	                			</rich:menuItem>
	                			<rich:menuItem submitMode="ajax"  action="/views/news.jsf">
	                				<h:outputText value="Noticias"/>	                				
	                			</rich:menuItem>
	                			<rich:menuItem submitMode="ajax"  action="/views/pending-users-bet.jsf">
	                				<h:outputText value="Ver apuestas entre usuarios"/>	                				
	                			</rich:menuItem>
	                			<rich:menuSeparator id="menuSeparator11" />	                			
	         					<rich:menuItem submitMode="ajax" action="#{userBean.logout_ON_CLICK}">	
	         						<h:outputText value="Salir"/>	
               					</rich:menuItem>		           								               			
            				</rich:dropDownMenu>		       		
		        </h:form>
		<rich:popupPanel id="lp" autosized="true" modal="false"
	        moveable="false" resizeable="false">
	       	
	      	<h:form id="formlogin">
		        <h:panelGrid columns="3">
		       		<h:outputText value="Usuario(e-mail):" />
		            <h:inputText value="#{userBean.mail}" id="email" validatorMessage="Formato de mail incorrecto">
		            	<f:validateRegex
							pattern="^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+([;.](([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+)*$"></f:validateRegex>
					</h:inputText>
					<rich:message for="email" />
					<h:outputText value="Password:" />
					<h:inputSecret id="passwort" value="#{userBean.password}" redisplay="true" required="true"/>
				</h:panelGrid>
				<h:commandButton id="login" type="submit" value="Ingresar" action="#{userBean.login_ON_CLICK}"/>
				<rich:message for="login" />					
			</h:form>			
	 </rich:popupPanel>
   </ul> 
</ui:composition>
